<template>
    <div id="header-content">
        <el-form id="header-query" label-width="120px" style="width:62%" ref="searchParam" :model="searchParam">
            <!-- <el-form-item label="产品编码/名称" prop="fundCode">
                <el-select v-model="searchParam.fundCode" size="mini" filterable clearable @change="changeFundCode">
                    <el-option v-for="item in fundInfos" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="产品序号/名称" prop="fundId">
                <el-select v-model="searchParam.fundId" size="mini" filterable clearable>
                    <el-option
                        v-for="item in fundIds"
                        :key="item.dictKey"
                        :label="item.dictKey + ' ' + item.dictKeyName"
                        :value="item.dictKey"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="资产单元编号/名称" prop="assetUnitCode" label-width="145px">
                <el-select v-model="searchParam.assetUnitCode" size="mini" filterable clearable>
                    <el-option v-for="item in assetUnits" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="组合编码/名称" prop="groupCode">
                <el-select v-model="searchParam.groupCode" size="mini" filterable clearable>
                    <el-option v-for="item in combinations" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="证券代码/名称" v-show="isOpen && showSearchParams.includes('stockCode')" prop="stockCode">
                <el-select
                    v-model="searchParam.stockCode"
                    filterable
                    clearable
                    remote
                    :remote-method="getStockCodeList"
                    @clear="getStockCodeList('')"
                    @visible-change="handleStockVisibleChange"
                    :loading="selectLoading"
                    size="mini"
                >
                    <el-option v-for="item in stockCodes" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证券类别" v-show="isOpen && showSearchParams.includes('stockType')" prop="stockType" label-width="145px">
                <el-select v-model="searchParam.stockType" size="mini" filterable clearable>
                    <el-option v-for="item in stockTypes" :key="item.dictKey + item.dictKeyName" :label="item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="资产分类" v-show="isOpen && showSearchParams.includes('assetClass')" prop="assetClass">
                <el-select v-model="searchParam.assetClass" size="mini" filterable clearable>
                    <el-option v-for="item in assetClassDict" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKey"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发行人编码/名称" v-show="isOpen && showSearchParams.includes('issueCode')" prop="issueCode">
                <el-select
                    v-model="searchParam.issueCode"
                    filterable
                    clearable
                    remote
                    :remote-method="getIssueList"
                    @clear="getIssueList('')"
                    @visible-change="handleIssueVisibleChange"
                    :loading="selectLoading"
                    size="mini"
                >
                    <el-option v-for="item in issueDict" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="持仓标志" v-show="isOpen && showSearchParams.includes('positionFlag')" prop="positionFlag" label-width="145px">
                <el-select v-model="searchParam.positionFlag" size="mini" filterable clearable>
                    <el-option v-for="item in positionFlags" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKey"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="投资类型" v-show="isOpen && showSearchParams.includes('investType')" prop="investType">
                <el-select v-model="searchParam.investType" size="mini" filterable clearable>
                    <el-option v-for="item in investTypes" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKey"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="交易市场" v-show="isOpen && showSearchParams.includes('marketCode')" prop="marketCode">
                <!-- :label-width="showSearchParams.length > 7 ? '145px' : '120px'" -->
                <el-select v-model="searchParam.marketCode" size="mini" filterable clearable>
                    <el-option v-for="item in marketTypes" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKey"> </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="受限类型" v-show="isOpen && showSearchParams.includes('restrictedType')">
                <el-select v-model="searchParam.restrictedType" size="mini" filterable clearable>
                    <el-option v-for="item in restrictedTypes" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKey"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="锁定受限类型" v-show="isOpen && showSearchParams.includes('lockrestrictedType')">
                <el-select v-model="searchParam.lockedLimitType" size="mini" filterable clearable>
                    <el-option v-for="item in lockrestrictedTypes" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKey"> </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div></div>
        <div style="margin-top:6px">
            <span id="show-content" @click="openBtn">
                更多查询条件
                <i :class="{ 'el-icon-arrow-down': !isOpen, 'el-icon-arrow-up': isOpen }"></i>
            </span>
            <el-button type="primary" size="mini" @click="handleButton('refresh')">刷新</el-button>
            <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
            <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
            <el-button type="primary" size="mini" @click="handleButton('doLayout')"> 布局设置</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import DictionConstUtil from '@/utils/diction-const-util';
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';

@Component({ name: 'QueryCondition', components: {} })
export default class QueryCondition extends Vue {
    @Prop()
    showSearchParams: any;

    searchParam: any = {
        assetUnitCode: '',
        categoryCode: '',
        // fundCode: '',
        fundId: '',
        groupCode: '',
        investType: '',
        issueCode: '',
        marketCode: '',
        positionFlag: '',
        stockCode: '',
        stockType: '',
        restrictedType: '',
        lockedLimitType: '',
    };

    @Watch('searchParam', { deep: true })
    handleSearchParam(): void {
        this.$emit('comReturn', {
            isOpen: this.isOpen,
            searchParam: this.searchParam,
        });
    }
    isOpen: boolean = false;

    selectLoading: boolean = false;
    fundIds: any[] = []; // 产品序号下拉值

    // fundInfos: any[] = []; // 产品编码下拉值

    marketTypes: any[] = []; // 交易市场

    assetUnits: any[] = []; // 资产单元编号/名称

    positionFlags: any[] = []; // 持仓标志

    investTypes: any[] = []; // 投资类型

    combinations: any[] = []; // 组合

    restrictedTypes: any[] = []; // 受限类型

    lockrestrictedTypes: any[] = []; // 锁定受限类型

    stockCodes: any[] = []; // 证券代码

    stockTypes: any[] = []; // 证券类别

    issueDict: any[] = []; // 发行人编码/名称

    assetClassDict: any[] = []; // 投资类型

    @Prop({ default: false }) isFirst: boolean;

    @Prop({ default: false }) immediate: boolean;

    @Watch('isFirst')
    handleIsFirst() {
        this.isFirst && this.getDict();
    }

    mounted() {
        if (this.immediate) {
            this.getDict();
        }
    }

    // 字典值
    async getDict() {
        // 交易市场
        // await new Promise((resolve, reject) => {
        //     this.$axios
        //         .post('/reportDict/market')
        //         .then((res: any) => {
        //             this.marketTypes = res;
        //             resolve(res);
        //         })
        //         .catch(err => {
        //             reject(err);
        //         });
        // });

        // 持仓标志
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/byCode', {
                    dictCode: '40350',
                })
                .then((res: any) => {
                    this.positionFlags = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });

        // 投资类型
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/byCode', {
                    dictCode: '40351',
                })
                .then((res: any) => {
                    this.investTypes = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });

        // 资产分类
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/byCode', {
                    dictCode: '10036',
                })
                .then((res: any) => {
                    this.assetClassDict = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
        // // 产品编码信息
        // await new Promise((resolve, reject) => {
        //     this.$axios
        //         .post('/reportDict/fund')
        //         .then((res: any) => {
        //             this.fundInfos = res;
        //             resolve(res);
        //         })
        //         .catch(err => {
        //             reject(err);
        //         });
        // });

        // 产品序号
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/fundId')
                .then((res: any) => {
                    this.fundIds = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });

        // 证券类别
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/stockType')
                .then((res: any) => {
                    this.stockTypes = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });

        // // 受限类型
        // await new Promise((resolve, reject) => {
        //     this.$axios
        //         .post('/reportDict/restrictedType')
        //         .then((res: any) => {
        //             this.restrictedTypes = res;
        //             resolve(res);
        //         })
        //         .catch(err => {
        //             reject(err);
        //         });
        // });

        // // 锁定受限类型
        // await new Promise((resolve, reject) => {
        //     this.$axios
        //         .post('/reportDict/lockRestrictedType')
        //         .then((res: any) => {
        //             this.lockrestrictedTypes = res;
        //             resolve(res);
        //         })
        //         .catch(err => {
        //             reject(err);
        //         });
        // });

        await this.getIssueList('');

        await this.getStockCodeList('');
    }

    // 发行人编码/名称
    getIssueList(dictKey: string) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/issue', {
                    dictKey,
                })
                .then((res: any) => {
                    this.issueDict = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    // 证券代码
    getStockCodeList(e: string) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/stockCode', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.stockCodes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    openBtn() {
        this.isOpen = !this.isOpen;
        this.$emit('comReturn', {
            isOpen: this.isOpen,
            searchParam: this.searchParam,
        });
    }

    async handleButton(type: string) {
        if (type == 'reset') {
            await this.getStockCodeList('');
            (this.$refs['searchParam'] as any).resetFields();
        } else {
            this.$emit('handleButton', type);
        }
    }

    // 产品编码改变
    // changeFundCode(dictKey: any): void {
    //     this.searchParam.assetUnitCode = '';
    //     this.assetUnits = [];
    //     if (dictKey) {
    //         let need = this.fundInfos.find(item => item.dictKey == dictKey);
    //         this.searchParam.fundId = need.dictCode || '';
    //         this.isChangeFundCode = true;
    //         this.getAssetUnit();
    //     } else {
    //         this.searchParam.fundId = '';
    //     }
    // }

    // 产品序号变化->组合编码
    @Watch('searchParam.fundId', { deep: true })
    async changeFundId(dictKey: string) {
        this.searchParam.assetUnitCode = '';
        this.assetUnits = [];
        if (!dictKey) {
            this.searchParam.groupCode = '';
            return;
        } else {
            this.getAssetUnit();
        }
    }

    @Watch('searchParam.assetUnitCode')
    async handleAssetUnitCode(dictKey: string) {
        this.searchParam.groupCode = '';
        this.combinations = [];
        if (dictKey) {
            await this.getCombination();
        }
    }

    // 资产单元编号下拉框
    getAssetUnit() {
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/assetUnit', {
                    dictKey: this.searchParam.fundId,
                })
                .then((res: any) => {
                    this.assetUnits = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    // 组合编码下拉框
    getCombination() {
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/combination', {
                    dictKey: this.searchParam.assetUnitCode,
                })
                .then((res: any) => {
                    this.searchParam.groupCode = '';
                    this.combinations = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    // 证券代码
    async handleStockVisibleChange(isShow: boolean) {
        if (!isShow && this.stockCodes.length < 1) {
            await this.getStockCodeList('');
        }
    }

    // 发行人
    async handleIssueVisibleChange(isShow: boolean) {
        if (!isShow && this.issueDict.length < 1) {
            await this.getIssueList('');
        }
    }
}
</script>
<style lang="scss" scoped>
#header-content {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 15px 0;

    #header-query {
        display: grid;
        // grid-template-columns: repeat(3, 1fr);
        grid-template-columns: 1fr 1.1fr 1fr;
        /deep/ .el-form-item {
            margin-bottom: 4px;
            .el-form-item__label {
                color: black;
                padding-right: 2px;
            }
        }
    }

    #show-content {
        cursor: pointer;
    }
}
</style>
